/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    ListView,
    RefreshControl
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
import Global from "../Commom/GlobalConst";
import Search from '../Components/Search';
import RuralAPIService from "../Commom/RuralAPIService";
import Toast from '../Utils/toast';
import ImageViewer from "./ImageViewer";
import EventDetailsPage from './EventDetailsPage';
import WithTogetherDetails from './WithTogetherDetails';
import QuestionDetailsPage from './QuestionDetailsPage';
import StrategyDetailPage from '../Components/StrategyDetailPage';
import DateUtil from "../Commom/DateUtil";
export default class URuralSearchPage extends Component {
    constructor(props) {
        super(props);
        var dataSourceData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSourceList: dataSourceData,
            data: [{type_id: 2}, {type_id: 2}, {type_id: 2}, {type_id: 2}],
            aboutWithImage:[{image:require('../../Image/new/image_01.png')},
                {image:require('../../Image/new/image_02.png')},
                {image:require('../../Image/new/image_03.png')}],
            dataList:[],
            label:['斗门村','斗门旅游','斗门古街一日游','金台寺寺庙','十里莲江','农家乐','珠海乡村旅游','斗门镇'],
        }


    }
    componentDidMount() {
        RuralAPIService.HotSearchLabels('1').then((ret)=> {
            this.setState({
                label:ret.label,
            })
        }).catch((err)=> {
        });
        if(this.props.search!=null&&this.props.search!=''){
            this.onSearch(this.props.search);
        }
    }
    onSearch(search){
        // if(search==null||search==''){
        //     Toast.show('请输入搜索内容');
        //     return;
        // }
        RuralAPIService.HomeSearch(search).then((ret)=> {
            console.log('ret',ret);
            this.setState({
                dataList:ret,
            })
        }).catch((err)=> {
        });
    }
    BackAction() {
        this.props.navigator.pop();
    }
    viewPagerItemClick(images) {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: images,
            }
        })
    }
    goActivityDetails(id){
        this.props.navigator.push({
            id: 'EventDetailsPage',
            component: EventDetailsPage,
            passProps: {
                ID:id
            }
        });
    }
    goAboutWith(id){
        this.props.navigator.push({
            id: 'WithTogetherDetails',
            component: WithTogetherDetails,
            passProps: {
                ID:id
            }
        });
    }
    goQA(id){
        this.props.navigator.push({
            id: 'QuestionDetailsPage',
            component: QuestionDetailsPage,
            passProps: {
                ID:id
            }
        });
    }
    goStrategyPage(id){
        this.props.navigator.push({
            id: 'StrategyDetailPage',
            component: StrategyDetailPage,
            passProps: {
                ID:id
            }
        });
    }
    ListDataRow(rowData, sectionId, rowId){
        if(rowData.type_id==5){
            return(
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>  this.goActivityDetails(rowData.id)}>
                    <View style={{ backgroundColor: 'white',marginBottom: 10,}}>
                        <View style={{flexDirection:'row',height:50,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
                            <View style={{flexDirection:'row',alignItems:'center'}}>
                                <Text style={{color:'black',marginLeft:10,fontSize:15,fontWeight:'bold'}}>乡村活动</Text>
                            </View>
                        </View>
                        <View style={{width,height:170,justifyContent:'center',alignItems:'center',backgroundColor:'white'}}>
                            <Image style={{width:width-20,height:170,resizeMode:'cover',borderRadius:5}}
                                   source={{uri:rowData.image}}
                            />
                        </View>
                        <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white'}}>
                            <View style={{marginLeft:10,width:width-90,height:55}}>
                                <Text style={{color:'black',fontSize:15,fontWeight:'bold'}}>{rowData.title}</Text>
                                <Text style={{marginTop:3,fontSize:11,lineHeight:18}}>{rowData.content}</Text>
                            </View>
                            <TouchableOpacity activeOpacity={0.5}
                                              onPress={()=>  this.goActivityDetails(rowData.id)}>
                                    <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                                        <Text style={{color:'white',fontSize:11}}>查看详情</Text>
                                    </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            );
        }else if(rowData.type_id==0){
            return(
                <View style={{ backgroundColor: 'white',marginBottom: 10,}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                   source={{uri:rowData.author_image}}
                            />
                            <Text >{rowData.author_name}</Text>
                        </View>
                        <Text style={{marginRight:10}}>{DateUtil.dateStr(rowData.time)}</Text>
                    </View>
                    <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.title}</Text>
                    <View style={{width:width-10,marginLeft:5,height:120,flexDirection:'row',flexWrap: 'wrap',marginTop:10}}>
                        {rowData.images.map((item, index) => {
                            return(
                                <TouchableOpacity  style={{width:(width-30)/3,height:120,marginBottom:5,marginLeft:5}}  key={'row' + index} onPress={() => this.viewPagerItemClick(rowData.images)}>
                                    <Image
                                        key={'row' + index}
                                        style={{width:(width-30)/3,height:120,resizeMode:'cover'}}  source={{uri:item}}/>
                                </TouchableOpacity>
                            )
                        })}
                    </View>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                   source={require('../../Image/new/image_car.png')}
                            />
                            <Text >自驾约伴</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={() => this.goAboutWith(rowData.id)}>
                            <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#24CD78'}}>
                                <Text style={{color:'white',fontSize:12}}>参加</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }else if(rowData.type_id==1){
            return(
                <View style={{ backgroundColor: 'white',marginBottom: 10,}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:30,height:30,borderRadius:15,marginLeft:10,marginRight:5}}
                                   source={{uri:rowData.author_image}}
                            />
                            <Text >{rowData.author_name}</Text>
                        </View>
                        <Text style={{marginRight:10}}>{DateUtil.dateStr(rowData.time)}</Text>
                    </View>
                    <Text numberOfLines={3} style={{marginLeft:10,width:width-20,lineHeight:24,color:'black'}}>{rowData.title}
                    </Text>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Image style={{width:18,height:18,marginLeft:10,marginRight:8,resizeMode:'contain'}}
                                   source={require('../../Image/new/icon_ask.png')}
                            />
                            <Text >有问必答</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.goQA(rowData.id)}>
                            <View style={{width:60,height:24,justifyContent:'center',alignItems:'center',marginRight:10,borderRadius:3,backgroundColor:'#F2B94C'}}>
                                <Text style={{color:'white',fontSize:12}}>有赏问答</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }else if(rowData.type_id==6){
            return(
                <View style={{ backgroundColor: 'white',marginBottom: 10,}}>
                    <View style={{flexDirection:'row',height:55,width,justifyContent:'space-between',alignItems:'center',backgroundColor:'white',marginTop:8,borderTopWidth:1,borderColor:'#F5F5F5'}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <View style={{width:6,height:6,backgroundColor:'#24CD78',borderRadius:3,marginLeft:10,marginRight:5}}/>
                            <Text >推荐攻略</Text>
                        </View>
                    </View>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.goStrategyPage(rowData.id)} >
                        <View style={{width:width-20,height:180,marginLeft:10,borderRadius:5}}>
                            <Image style={{width:width-20,height:180,resizeMode:'cover',borderRadius:5}}
                                   source={{uri:rowData.image}}/>
                            <View style={{position: 'absolute',left:0,bottom:0,backgroundColor:'rgba(0,0,0,0.5)',width:width-20,height:30,justifyContent:'center',borderBottomLeftRadius:5,borderBottomRightRadius:5}}>
                                <Text style={{color:'white',marginLeft:8}}>{rowData.title}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
            );
        }else{
            return null;
        }
    }
    setString(searchString){
        this.props.navigator.replace({
            id: 'URuralSearchPage',
            component: URuralSearchPage,
            passProps: {
                search:searchString
            }
        });
    }
    labelBackGroundColor(index){
        var color='';
        switch (index){
            case 0:
                color='#F8F2FF';
                break;
            case 1:
                color='#E6E6FC';
                break;
            case 2:
                color='#FDEDF1';
                break;
            case 3:
                color='#FFF7EE';
                break;
            case 4:
                color='#FDEDF1';
                break;
            case 5:
                color='#FFF7EE';
                break;
            case 6:
                color='#EBFBF0';
                break;
            case 7:
                color='#E6E6FC';
                break;

        }
        return color;
    }
    render() {
        return (
        <View style={styles.container}>
            <View style={{flexDirection:'row',width,height:64,paddingTop:24,backgroundColor:'#24CD78',alignItems:'center'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.BackAction()}>
                    <Image style={{width:16,height:16,marginLeft:10,marginRight:10,resizeMode:'contain'}}
                           source={require('../../Image/back_icon_white.png')}
                    />
                </TouchableOpacity>
                <View style={{ width:width-35,height:40,backgroundColor: 'white',}}>
                    <Search
                        ref="search_box"
                        backgroundColor={'#24CD78'}
                        contentWidth={width-36}
                        middleWidth={(width-36)/2}
                        positionRightDelete={55}
                        cancelButtonWidth={50}
                        placeholder={'搜索'}
                        cancelTitle={'取消'}
                        keyword={this.props.search}
                        onSearch={(search)=>this.onSearch(search)}
                    />
                </View>
            </View>

            {this.state.dataList!=null&&this.state.dataList!=''?
                <ListView
                    style={{marginTop:10}}
                    dataSource={this.state.dataSourceList.cloneWithRows(this.state.dataList)}
                    enableEmptySections={true}
                    renderRow={(rowData)=>this.ListDataRow(rowData)}/>:
                <View style={{paddingTop:18,flex:1,backgroundColor:'white'}}>
                    <Text style={{margin:10,color:'black',fontSize:15}}>热门搜索</Text>
                    <View style={{width:width-20,marginLeft:10,marginBottom:15,flexDirection:'row',flexWrap: 'wrap',justifyContent:'space-around'}}>
                        {this.state.label.map((item, index) => {
                            return(
                                <TouchableOpacity
                                    style={{marginTop:10,height:25}}
                                    key={index} activeOpacity={0.5}
                                    onPress={()=>this.setString(item)}>
                                    <View key={index} style={{backgroundColor: this.labelBackGroundColor(index),borderRadius:3,height:25,alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{color:'black',fontSize:14,marginLeft:5,marginRight:5}}>{item}</Text>
                                    </View>
                                </TouchableOpacity>
                            )
                        })}
                    </View>
                </View>}

        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: Global.Const.transparent,
    },
});

